<%@page contentType="text/html;charset=utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>用户注册 - 当当网</title>
		<link href="../css/login.css" rel="stylesheet" type="text/css" />
		<link href="../css/page_bottom.css" rel="stylesheet" type="text/css" />
	</head>
	<body>
		<%@include file="../common/head1.jsp"%>
		<div class="login_step">
			注册步骤:
			<span class="red_bold">1.填写信息</span> > 2.验证邮箱 > 3.注册成功
		</div>
		<div class="fill_message">
			<form name="ctl00" method="post" action="${pageContext.request.contextPath}/User/User_register" id="f" onsubmit="return submitForm()">
				<h2>
					以下均为必填项
				</h2>
				<table class="tab_login" >
					<tr>
						<td valign="top" class="w1">
							请填写您的Email地址：
						</td>
						<td>
							<input name="user.email" type="text" id="txtEmail" class="text_input" onblur="email()"/>
							<div class="text_left" id="emailValidMsg">
								<p>
									请填写有效的Email地址，在下一步中您将用此邮箱接收验证邮件。
								</p>
									<span id="email.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置您在当当网的昵称：
						</td>
						<td>
							<input name="user.nickname" type="text" id="txtNickName" class="text_input"  onblur="userName()"/>
							<div class="text_left" id="nickNameValidMsg">
								<p>
									您的昵称可以由小写英文字母、中文、数字组成，
								</p>
								<p>
									长度4－20个字符，一个汉字为两个字符。
								</p>
								<span id="name.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							设置密码：
						</td>
						<td>
							<input name="user.password" type="password" id="txtPassword"
								class="text_input" onblur="pwds()"/>
							<div class="text_left" id="passwordValidMsg">
								<p>
									您的密码可以由大小写英文字母、数字组成，长度6－20位。
								</p>
								<span id="password.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							再次输入您设置的密码：
						</td>
						<td>
							<input name="pwd" type="password" id="txtRepeatPass"
								class="text_input"/>
							<div class="text_left" id="repeatPassValidMsg">
							<span id="password1.info" style="color:red"></span>
							</div>
						</td>
					</tr>
					<tr>
						<td valign="top" class="w1">
							验证码：
						</td>
						<td>
							<img class="yzm_img" id='imgVcode' src="${pageContext.request.contextPath}/User/User_yazheng"/>
							<input name="yanzheng" type="text" id="txtVerifyCode"
								class="yzm_input"/>
							<div class="text_left t1">
								<p class="t1">
									<span id="vcodeValidMsg">请输入图片中的四个字母。</span>
									
									<span id="number.info" style="color:red"></span>
									<a href="javascript:void(0)" onclick="qiehuan()" >看不清楚？换个图片</a>
								</p>
							</div>
						</td>
					</tr>
				</table>

				<div class="login_in">
					<input name="user.state" value="0" hidden="hidden"/>
					<input id="btnClientRegister" class="button_1" name="submit"  type="submit" value="注 册"/>
				</div>
			</form>
		</div>
		<%@include file="../common/foot1.jsp"%>
	<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-1.11.1.js"></script>
	<script type="text/javascript">
		function email() {
			var c=$("#txtEmail").val();
			var b=  new RegExp("^[a-z0-9A-Z]+[- | a-z0-9A-Z . _]+@([a-z0-9A-Z]+(-[a-z0-9A-Z]+)?\\.)+[a-z]{2,}$");
			if (c==""){
				$("#emailValidMsg>p").html("邮箱不能为空")
				return false
			}else{
				if (!b.test(c)) {
					$("#emailValidMsg>p").html("邮箱格式不正确")
					return  false;
				}else{
					var xml=new  XMLHttpRequest;
					var email= $("#txtEmail").val();
					xml.open("post","${pageContext.request.contextPath}/User/User_ma?emailName="+email+"&email="+email);
					xml.onreadystatechange=function () {
						if (xml.readyState==4&xml.status==200){
							var e= xml.responseText;
							if (e=="true"){
								$("#emailValidMsg>p").html("该邮箱已被注册")
								return false;
							}else if (e=="false"){
								$("#emailValidMsg>p").html("该邮箱没有被注册")
								return true;
							}
						}
					}
					xml.send();
				}
			}
		}
		function pwds() {
				var ema= $("#txtPassword").val();
				var  a=  /^.{6,20}$/
				if (ema==""){
					$("#passwordValidMsg>p").html("密码不能为空")
					return  false;
				}else{
					if (isNaN(ema)){
						if (a.test(ema)){
							$("#passwordValidMsg>p").html("密码正确")
							return true;
						}else{
							$("#passwordValidMsg>p").html("密码长度应该在6-20位");
							return false;
						}
						return true;
					}else{
						$("#passwordValidMsg>p").html("密码应该由数字，字母组成")
						return false;
					}
				}
		}
		function userName() {
			var c= $("#txtNickName").val();
			var  a=  /^.{6,20}$/
			if (c==""){
				$("#nickNameValidMsg>p:first").html("昵称不能为空")
				$("#nickNameValidMsg>p:last").hide()
				return false;
			}else{
				if (isNaN(c)){
					$("#nickNameValidMsg>p:first").html("昵称正确")
					$("#nickNameValidMsg>p:last").hide()
					return true;
				}else{
					$("#nickNameValidMsg>p:first").html("昵称不能为全数字")
					$("#nickNameValidMsg>p:last").hide()
					return false;
				}
			}
		}
		function submitForm() {
			return userName()&pwds()&email();
			alert(userName()+pwds()+email())
		}
		function qiehuan() {
			$("#imgVcode").prop("src","${pageContext.request.contextPath}/User/User_yazheng?a="+Math.random())
		}
		console.log(submitForm())
	</script>
	</body>
</html>

